<html>
  <head>
    <title>SIMILE Widgets | Timeline | Examples | Test Dynamic Loading | Body Scripts</title>
    <link rel='stylesheet' href='../styles.css' type='text/css' />
    <style>
        div.timeline-event-icon {
            border: 1px solid #aaa;
            padding: 1px;
            background: white;
        }
        div.timeline-event-icon-default {
            border: none;
            padding: 0px;
        }
    </style>
  </head>
  <body>
    <ul id="path">
      <li><a href="/" title="Home">SIMILE Widgets</a></li>
      <li><a href="../../" title="Timeline">Timeline</a></li>
      <li><a href="../" title="Examples">Examples</a></li>
      <li><span>Test Dynamic Loading : Fully Dynamic</span></li>
    </ul>
  
    <div id="header">
      <h1>Test Dynamic Loading : Fully Dynamic</h1>
    </div>
  
    <div id="content">
      <p>Timeline version <span id='tl_ver'></span>.</p>
    
      <div id="tl" class="timeline-default" style="height: 400px;"></div>
    </div>
    
    <div id="footer">
      Copyright &copy; <a href="http://web.mit.edu/">Massachusetts Institute of Technology</a> and Contributors 2006-2009 ~ Some rights reserved
    </div>
    
    <script src="../../api/lib/require.js" type="text/javascript"></script>
    <script>
require(["../../api/configs/local-config"], function() {
    require(["timeline", "jquery"], function(Timeline, $) {
        var tl;
        var onLoad = function() {
    var eventSource = new Timeline.DefaultEventSource(0);
    
    var theme = Timeline.ClassicTheme.create();
    theme.event.instant.icon = "no-image-40.png";
    theme.event.instant.iconWidth = 40;  // These are for the default stand-alone icon
    theme.event.instant.iconHeight = 40;
    
    var d = Timeline.DateTime.parseIso8601DateTime("2001-06-10");
    
    var bandInfos = [
        Timeline.createBandInfo({
            width:          "90%", 
            intervalUnit:   Timeline.DateTime.WEEK, 
            intervalPixels: 150,
            eventSource:    eventSource,
            date:           d,
            theme:          theme,
            eventPainter:   Timeline.CompactEventPainter,
            eventPainterParams: {
                iconLabelGap:     5,
                labelRightMargin: 20,
                
                iconWidth:        80, // These are for per-event custom icons
                iconHeight:       80,
                
                stackConcurrentPreciseInstantEvents: {
                    limit: 5,
                    moreMessageTemplate:    "%0 More Events",
                    icon:                   "no-image-80.png", // default icon in stacks
                    iconWidth:              80,
                    iconHeight:             80
                }
            }
        }),
        Timeline.createBandInfo({
            width:          "10%", 
            intervalUnit:   Timeline.DateTime.MONTH, 
            intervalPixels: 100,
            eventSource:    eventSource,
            date:           d,
            theme:          theme,
            layout:         'overview'  // original, overview, detailed
        })
    ];
    bandInfos[1].syncWith = 0;
    bandInfos[1].highlight = true;
    
    tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
    tl.loadJSON("data.json?"+ (new Date().getTime()), function(json, url) { eventSource.loadJSON(json, url); });

        Timeline.writeVersion('tl_ver');
};
        var resizeTimerID = null;
        var onResize = function() {
            if (resizeTimerID == null) {
                resizeTimerID = window.setTimeout(function() {
                    resizeTimerID = null;
                    tl.layout();
                }, 500);
            }
        };

        $(document).ready(onLoad);
        document.onresize = onResize;
    });
});
    </script>
  </body>
</html>
